<template>
	<view class="home-page">
		<view scroll-y class="main-box" :class="showUpdateStatus ? 'ovhd' : ''">
			<swiper class="banner-list" autoplay circular>
				<swiper-item v-for="(item, key) in banner" :key="key">
					<image :src="item.cover" @click="toAnyPage(item)" />
				</swiper-item>
			</swiper>
			<swiper class="force-list" indicator-dots autoplay circular indicator-color="#eee" indicator-active-color="#999">
				<swiper-item v-for="(item, key) in bandata" :key="key">
					<view class="force-item">
						<view class="force-box" v-for="(list, index) in bandata[key]" :key="index">
							<view class="box_cont" :class="list.sidx==1?'box_bg':''">
								<view class="force-name">{{list.name}}</view>
								<view class="force-num red">{{list.last_price==0?'---':list.last_price}}</view>
								<view class="force-bottom">
									<view class="left-num red">
										{{list.last_price - list.pre_settlement==0 ? '--' : (list.last_price - list.pre_settlement).toFixed(2)}}
									</view>
									<view class="right-num red">{{list.hl==0?'--':list.hl+'%'}}</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

			<view class="quick-list d-f f-w-w kaishi">
				<view v-for="(item, index) in quickList" :key="index" class="quick-item d-f f-d-c a-i-c j-c-c" @click="onClick(item)">
					<image class="item-icon" :src="'https://sou-liang.oss-cn-shanghai.aliyuncs.com/weixin/index/' + item.icon + '.png'"></image>
					<view class="item-name">{{item.name}}</view>
				</view>
			</view>

			<view class="tabs">
				<view class="tabs-header thin-border__b">
					<view class="tab-list">
						<view v-for="(tab, index) in tabsList" :key="index" class="tab-item"
							:class="{active: tabIndex === index}" @click="onSwitchTab(tab, index)">
							<view class="tab-name">{{tab.name}}</view>
							<view class="tab-underline"></view>
						</view>
					</view>
				</view>
				<view class="tabs-content">
					<view v-if="tabIndex==0" class="news-list">
						<view v-for="(news, index) in newsList" :key="index" class="news-item thin-border__b">
							<news-one :newsInfo="news" />
						</view>
						<u-loadmore :status="status" />
					</view>

					<view v-if="tabIndex==1" class="strategy-list">
						<!-- 推送 -->
						<view class="Strategy_square" v-for="(item, index) in strategyData1" :key="index">
							<view class="square_cont">
								<view class="square_tit" @click="tostrategyFn(item)">
									<text class="_name">{{item.name}}</text>
									<text class="_time">{{item.date}} {{item.time}}</text>
								</view>
								<view class="square_item">
									<text class="">{{item.strategyName}}</text> <text class="line">|</text>
									<text class="text" v-if="item.bS==0&&item.oC==1"
										:class="item.bS!=item.oC?'strategy-side':'strategy-trend'">买涨</text>
									<text class="text" v-else-if="item.bS==1&&item.oC==1"
										:class="item.bS!=item.oC?'strategy-side':'strategy-trend'">买跌</text>
									<text class="text" v-else-if="item.bS==1&&item.oC==0"
										:class="item.bS!=item.oC?'strategy-side':'strategy-trend'">卖涨</text>
									<text class="text" v-else="item.bS==0&&item.oC==0"
										:class="item.bS!=item.oC?'strategy-side':'strategy-trend'">卖跌</text> <text
										class="line">|</text>
									<text class="">{{item.prices}}</text> <text class="line">|</text>
									<text class="">{{item.volume}}手</text>
								</view>
							</view>
							<view class="square_btn" @click="todealFn(item)">
								去交易
							</view>
						</view>
						<!-- 历史 -->
						<view class="Strategy_square" v-for="(item, index) in strategyData" :key="index">
							<view class="square_cont">
								<view class="square_tit" @click="tostrategyFn(item)">
									<text class="_name">{{item.name}}</text>
									<text class="_time">{{item.date}} {{item.time}}</text>
								</view>
								<view class="square_item">
									<text class="">{{item.strategy_name}}</text> <text class="line">|</text>
									<text class="text" v-if="item.b_s==0&&item.o_c==1"
										:class="item.b_s!=item.o_c?'strategy-side':'strategy-trend'">买涨</text>
									<text class="text" v-else-if="item.b_s==1&&item.o_c==1"
										:class="item.b_s!=item.o_c?'strategy-side':'strategy-trend'">买跌</text>
									<text class="text" v-else-if="item.b_s==1&&item.o_c==0"
										:class="item.b_s!=item.o_c?'strategy-side':'strategy-trend'">卖涨</text>
									<text class="text" v-else="item.b_s==0&&item.o_c==0"
										:class="item.b_s!=item.o_c?'strategy-side':'strategy-trend'">卖跌</text> <text
										class="line">|</text>
									<text class="">{{item.prices}}</text> <text class="line">|</text>
									<text class="">{{item.volume}}手</text>
								</view>
							</view>
							<!-- <view class="square_btn" @click="todealFn(item)">
								去交易
							</view> -->
						</view>
						<data-empty v-if="strategyData.length==0" />
						<u-loadmore v-else :status="status" />
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="isShow" mode="center" width="90%" border-radius="15" :mask-custom-style="maskCustomStyle"
			:mask-close-able="false">
			<view class="agreement_cont">
				<view class="moucont_tit">
					温馨提示
				</view>
				<view class="moucont" v-if="shownum==0">
					感谢您下载并使用搜量网应用程序，我们非常重视并尊重您的个人信息和隐私保护。在您使用搜量网产品或服务前，
					请您务必仔细阅读并透彻理解协议的条款内容，特别是以粗体/粗体下划线标识的可能会明确您履行的义务或对您权利有所限制条款，
					您应重点阅读，在确认充分理解并同意后再开始使用。
					<br>
					<br>
					如您继续使用搜量网的产品或服务，请您同意后再开始使用。如您对协议内容有任何疑问，您可以随时通过官方渠道联系我们。
					<br>
					<br>
					您可以阅读完整版 <text class="agrem_text" @click="privacyFn">《隐私政策》</text> <text class="agrem_text"
						@click="UserFn">《用户协议》</text>
				</view>
				<view class="moucont" v-else>
					您的信息仅用于为您提供服务，搜量网会坚决保障您的隐私信息安全。
					<br>
					<br>
					如果您仍不同意本隐私协议，很遗憾我们将无法为您提供服务。
					<br>
					<br>
					您可以阅读完整版 <text class="agrem_text" @click="privacyFn">《隐私政策》</text> <text class="agrem_text"
						@click="UserFn">《用户协议》</text>
				</view>
				<view class="moucont_btn">
					<button size="mini" v-if="shownum==0" :custom-style="customStyle" @click="shownum=1">不同意</button>
					<!-- <button size="mini" v-else :custom-style="customStyle" @click="noagreenFn">不同意并退出</button> -->
					<navigator target="miniProgram" open-type="exit" v-else :custom-style="customStyle"
						@click="noagreenFn" class="navigator" version="release">不同意并退出</navigator>
					<button size="mini" type="primary" :custom-style="customStyle" @click="agreenFn">同意</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue';
	import NewsOne from '@/components/news/newsOne.vue';
	import strategyThree from '@/components/strategy/strategyThree.vue';
	import VersionUpdateModal from '@/components/version-update-modal/index.vue';
	import DataEmpty from '@/components/data-empty/strategy.vue';
	import {
		SOCKET_URL
	} from '@/config/index.js';
	import {
		ACCESS_TOKEN
	} from '@/config/storage.js';
	import {
		getHomeInfo
	} from '@/api/default.js';
	import {
		getArticleAdv,
		getArticlePage,
		getmessages,
	} from '@/api/addons.js';
	import {
		verifyUserLogin,
		setLoginInfo
	} from '@/utils/storage.js';
	import {
		createSelectorQuery
	} from '@/utils/index.js';
	import {
		getStrategyCollect
	} from '@/api/strategy.js';
	import {
		getMemberInfo,
		loginByUid,
		getUserByPhone,
		decryptedData
	} from '@/api/member.js'
	import {
		toNewsPage,
		toRankPage,
		toStrategyPage,
		toAnyPage,
		toSystemGuidePage,
		toAccountOpenPage,
		toUserLoginPage,
		toStrategyDetailPage
	} from '@/utils/PageRouter.js';
	import {
		instrumentName
	} from '@/api/rank.js';
	import {
		appid,
		version
	} from '@/config/index.js';
	import {
		getAppUpdateInfo
	} from '@/api/site.js';
	import {
		SERVICE_URL
	} from '@/config/index.js';
	import {
		miniOpenId
	} from '@/api/trade.js';
	
	const token = uni.getStorageSync(ACCESS_TOKEN)
	export default {
		components: {
			NewsOne,
			strategyThree,
			UniNoticeBar,
			VersionUpdateModal,
			DataEmpty,
		},
		data() {
			return {
				token,
				update_url: "",
				ver_sion: "", // 版本号
				maskCustomStyle: {
					background: "rgba(0, 0, 0, 1)"
				},
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					width: "120px",
					fontWeight: 'bold'
				},
				quickList: [{
						name: '快速开户',
						icon: 'open-account',
						click: this.runKaihuFn,
						isLogin: true
					},
					{
						name: '策略商城',
						icon: 'strategy-mall',
						click: toStrategyPage
					},
					{
						name: '用户指引',
						icon: 'user-guide',
						click: toSystemGuidePage
					},
				],
				banner: [],
				bandata: [
					[],
					[],
					[]
				],
				MarketData: [],
				notify: [],
				newsList: [],
				tabIndex: 0,
				tabsList: [{
						name: '新闻资讯',
						icon: 'user-guide'
					},
					{
						name: '策略广场',
						icon: 'user-guide'
					},
				],
				strategyList: [],
				page: 1,
				limit: 10,
				strategyData: [],
				strategyData1: [],
				status: 'loadmore',
				istag: false,
				setInterval: null,
				sidx: -1,
				isShow: false,
				shownum: 0,
				numdata: [],
				newpage: 1,
				newlimit: 10,
				instrumentName: {},
				showUpdateStatus: false
			}
		},
		onReady() {},
		onLoad() {
			this.judge()
			this.getHomeData()
			this.getArticlePagedata()
			try {
				const home = uni.getStorageSync('Home_market');
				if (home) {
					this.bandata = home.data
				}
			} catch (e) {
				// error
			}
		},
		onShow() {
			this.getData()
			this.connectSocketInit()
			this.getmessaGes()
			const token = uni.getStorageSync(ACCESS_TOKEN)
			this.token = token
			this.localStore()	
			this.tryLogin()
			
		},
		onHide() {
			this.closeSocket()
			if (this.setInterval) {
				clearInterval(this.setInterval)
				this.setInterval = null
			}
		},
		//	下拉刷新
		onPullDownRefresh() {
			this.getHomeData()
		},
		// 触底刷新
		onReachBottom() {
			if (this.tabIndex == 1) {
				this.page += 1
				this.getmessaGes()
			} else {
				this.newpage += 1
				this.getArticlePagedata()
			}
		},
		created() {},
		computed: {},
		mounted() {},
		methods: {
			// 判断本地存储是否有sesstion,wxopenid,unionid
			localStore(){
				if(!uni.getStorageSync('session')){
					this.miniWeixinPay()
				}
			},
			agreenFn() { //用户点击同意按钮发生的事件
				uni.setStorageSync('upStorage', '1')
				let upStorage = uni.getStorageSync('upStorage')
				let upgrade = uni.getStorageSync('enforcement_upgrade');
				try {
					uni.setStorageSync('agreement_key', 'yes');
					uni.setStorageSync('agreement_date', new Date().toLocaleString());
				} catch (e) {
					// error
				}
				//隐藏所有弹窗，并展示tabBar
				this.isShow = false;
				uni.showTabBar({
					animation: true
				})
				this.miniWeixinPay();
			},
			
			//登录获取用户 的code
			miniWeixinPay() {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let code = loginRes.code;
						var obj = {
							code: code //微信code 
						}
						miniOpenId(obj).then(res => {
							if (res.code == 200) {
								let openid = res.data.openid
								let session_key = res.data.session_key
								let unionid = res.data.unionid
								uni.setStorageSync('session', session_key)
								uni.setStorageSync('wxopenid', openid)
								uni.setStorageSync('unionid', unionid)
								that.tryLogin()
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									mask: true,
									duration: 1500
								});
							}
						});
					}
				});
			},
			tryLogin(){
				console.log(uni.getStorageSync("unionid"))
				if(uni.getStorageSync("unionid")=="") return;
				//尝试登录
				verifyUserLogin().then((res) => { //登录相关
					this.isLogin = false
					this.getUserInfo()
				}).catch(e => {
					let unionid = uni.getStorageSync('unionid')
					let objunionid ={uid:unionid}
					loginByUid(objunionid).then((res) => {
						setLoginInfo(res.data.token)
					})
					
				})
			},
			showUpdate(bool) {
				this.showUpdateStatus = bool
			},
			async androidCheckUpdate() { //检测更新
				await getAppUpdateInfo({
					appid,
					version
				}).then(res => {
					const {
						data
					} = res
					this.content = data.content
					this.update_url = data.update_url
					let new1 = data.version.split('.')
					let new2 = version.split('.')
					if (new1[0] > new2[0] || new1[1] > new2[1]) {
						uni.reLaunch({
							url: '/components/version-update-modal/index'
						});
					} else {
						try {
							const visetime = uni.getStorageSync('version_key')
							if (visetime) {
								let atime = parseInt(visetime) + 3
								let date = new Date()
								let year = date.getFullYear()
								let month = date.getMonth() + 1
								let day = date.getDate()
								let getDate = year.toString() + month.toString() + day.toString()
								if (atime <= getDate) {
									uni.reLaunch({
										url: '/components/version-update-modal/index'
									});
								} else {

								}
							} else {
								uni.reLaunch({
									url: '/components/version-update-modal/index'
								});
							}
						} catch (e) {
							//TODO handle the exception
						}

					}
				}).catch(err => {
					// this.onUpdateActive(false)
				})
			},
			instrumentFn(text) { //
				let arr = this.instrumentName[text];
				if (arr) {
					return arr
				} else {
					return text
				}
			},
			tostrategyFn(item) {
				toStrategyDetailPage(item.strategy_id)
			},
			noagreenFn() { //点击不同意并退出按钮
				// 隐藏所有的弹窗
				this.isShow = false;
				uni.showTabBar({
					animation: true
				})
			},
			//首页判断是否同意
			judge() {
				uni.getStorage({
					key: 'agreement_key',
					success: () => {
						//不显示弹窗
						this.isShow = false;
					},
					fail: () => {
						//显示弹窗，隐藏tabar
						this.isShow = true;
						uni.hideTabBar()
					}
				})
			},
			privacyFn() {
				uni.navigateTo({
					url: '/pages/system/privacy-policy/privacy-policy'
				})
			},
			UserFn() {
				uni.navigateTo({
					url: '/pages/system/useragreem/useragreem'
				})
			},
			render() {
				uni.navigateTo({
					url: '/pages/tabBar/rankDetail/render/render'
				})
			},
			getData() {
				this.setInterval = setInterval(() => {
					uni.request({
						url: 'https://md.sou-liang.com/api/getData',
						success: (res) => {
							let num = res.data.length
							if (num != 0) {
								let fistData = this.bandata
								this.bandata = res.data
								for (let i = 0; i < num; i++) {
									for (let j = 0; j < num; j++) {
										if (fistData[i][j].last_price != this.bandata[i][j]
											.last_price || fistData[i][j].hl != this.bandata[i][j].hl
										) {
											this.bandata[i][j]['sidx'] = "1"
											setTimeout(() => {
												this.bandata[i][j].sidx = '0'
											}, 100)
										}
									}
								}
								try {
									uni.setStorageSync('Home_market', res);
								} catch (e) {
									// error
								}
							}
						}
					})
				}, 1000)
			},
			//初始化websocket
			connectSocketInit() {
				const userdata = uni.getStorageSync('MEMBER_INFO')
				let {
					id
				} = userdata
				// 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】47.102.157.67 / 192.168.43.133:2000
				let randomNum = Math.random().toString().substring(2, 7)
				getApp().globalData.IDnum = randomNum
				getApp().globalData.connectSocket = uni.connectSocket({
					url: "wss://socket.sou-liang.com/ws/pushMsg?id=" + id,
					success(data) {},
				});
				this.getWebsocketMsg();
			},
			//接收websocket发送的消息
			getWebsocketMsg() {
				// 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
				let that = this
				getApp().globalData.connectSocket.onOpen((res) => {
					that.istag = true
					getApp().globalData.connectSocket.onMessage((res) => {
						let arr = JSON.parse(res.data)
						let tag = arr.tag
						if (tag == 'trader') {
							let data = arr.data[0].date
							this.strategyData1.unshift(...arr.data)
						}
					});
				})
				// 这里仅是事件监听【如果socket关闭了会执行】
			},
			closeSocket() {
				getApp().globalData.connectSocket.close({
					success(res) {
						// getApp().globalData.is_open_socket = false;
					},
					fail(err) {}
				})
			},
			// 数组排序
			sortArr(arr) {
				arr.sort(function compareFunction(param1, param2) {
					return param1.localeCompare(param2);
				});
				return arr;
			},
			sortList(lists) { // lists传的是数组
				return lists.sort((a, b) => {
					return a['volume'].localeCompare(b['volume']) // grapheme为字母对应的属性名
				})
			},
			sortBykey(ary, key) {
				return ary.sort(function(a, b) {
					let x = a[key]
					let y = b[key]
					return ((x < y) ? -1 : (x > y) ? 1 : 0)
				})
			},
			getmessaGes() { //获取策略历史消息
				getmessages({
					page: this.page,
					limit: this.limit
				}).then(res => {
					this.status = 'loading';
					let num = res.data.length
					let snum = this.strategyData.length
					if (num == 0) {
						this.status = 'nomore'
					} else {
						if (this.page == 1) {
							this.strategyData = res.data
						} else {
							for (let i = 0; i < num; i++) {
								this.strategyData.push(res.data[i])
							}
						}
					}
				})
			},
			getStrategy() {
				socket.on('connect', function() {
					socket.emit('joinStrategyGroup', {
						'access-token': token
					})
				})
				socket.on('traders', data => {
					const list = this.strategyList
					list.unshift(...data)
					this.strategyList = list
				})
				socket.on('historyTraders', data => {
					const list = this.strategyList
					this.strategyList = list.concat(data)
				})
				socket.on('quotation', data => {
					this.strategyList = data
				})
				socket.on('disconnect', data => {
					this.strategyList = []
				})
				socket.on('connect_error', () => {
					this.strategyList = []
					uni.hideLoading()
				})
			},
			runKaihuFn() {
				toAccountOpenPage()
			},
			//	切换类型
			onSwitchTab(tab, key) {
				this.tabIndex = key
			},
			onClick(item) {
				if (item.isLogin) {
					if (!this.token) {
						//调用 用户登录
						toUserLoginPage()
						return false
					}
				}
				if (item.click) {
					item.click()
				}
			},
			getArticlePagedata() {
				let data = {
					page: this.newpage,
					limit: this.newlimit
				}
				getArticlePage(data).then(res => {
					const {
						list,
						pagination
					} = res.data
					this.status = 'loading';
					let num = res.data.list.length
					if (num == 0) {
						this.status = 'nomore'
					} else {
						for (let i = 0; i < num; i++) {
							this.newsList.push(res.data.list[i])
						}
					}
				})
			},
			getHomeData() {
				getHomeInfo().then(res => {
					this.banner = res.data.ad
					this.notify = res.data.notify
					uni.stopPullDownRefresh()
				}).catch(() => {
					uni.stopPullDownRefresh()
				})
			},
			toNewsPage() {
				toNewsPage()
			},
			//	跳转任意界面
			toAnyPage(item) {
				if (item.id == 5) {
					toAnyPage('/pages/news/blank/newblank/newblank')
				} else {
					toAnyPage(item.jump_link)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigator {
		border: 1px solid #e7e7e7;
		background-color: #f8f8f8;
		padding: 10upx 30upx;
		border-radius: 8upx;
	}

	.Strategy_square {
		width: 100%;
		background-color: #fff;
		margin: 10px 0;
		padding: 20px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #DBDBDB;

		.square_cont {
			.square_tit {
				._name {
					font-size: 18px;
					font-weight: bold;
					color: #EB3B42;
					font-family: Sans-serif;
				}

				._time {
					font-size: 14px;
					margin-left: 15px;
				}
			}

			.square_item {
				color: #848484;
				font-size: 12px;
				margin-top: 10px;
				display: flex;
				align-items: center;

				.line {
					margin: 0 5px;
				}

				.text {
					color: #fff;
					padding: 1px 3px;
				}

				.strategy-side {
					background-color: #CB1D14;
				}

				.strategy-trend {
					background-color: #03B016;
				}
			}
		}
	}

	.agreement_cont {
		padding: 10px 50upx 50upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin: 0 3%;
		
		.moucont_tit {
			color: #000;
			font-size: 18px;
			font-weight: 800;
			margin: 20rpx 0 40rpx;
		}

		.moucont {
			font-size: 16px;

			.agrem_text {
				color: #2C6BC0;
			}
		}

		.moucont_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 12px;
		}
	}

	.red {
		color: #eb333b;
	}

	.green {
		color: #2daf4a;
	}

	.home-page {
		height: 100vh;

		.main-box {
			height: 100vh;

			.banner-list /deep/ {
				height: 500rpx;
			}

			.force-list /deep/ {
				height: 200rpx;
				margin-bottom: 20rpx;
				background-color: #fff;

				.uni-swiper-dot {
					width: 10rpx;
					height: 10rpx;
				}

				.force-item {
					height: 100%;
					display: flex;
					align-items: center;
					flex-direction: row;
				}

				.force-box {
					flex: 1;
					display: flex;
					align-items: center;
					flex-direction: column;
					padding-bottom: 30rpx;
					justify-content: center;
					text-align: center;
				}

				.box_cont {
					width: 80%;
					height: 100%;
					padding: 7px 10px;
					// background-color:#FA3534;					
				}

				.box_bg {
					background-color: #fdf7f7;
					// background-color:#FA3534;
				}

				.force-line {
					height: 50%;
				}

				.force-name {
					color: #999;
				}

				.force-num {
					font-size: 40rpx;
					font-weight: bold;
					margin: 2px 0;
				}

				.force-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					padding: 0 5px;

					.left-num {
						// margin-right: 20rpx;
					}
				}
			}

			.kaishi {
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.quick-list {
				background: #fff;
				padding-bottom: 20rpx;

				.quick-item {
					width: 25%;
					padding-top: 20rpx;

					.item-icon {
						width: 80rpx;
						height: 80rpx;
					}

					.item-name {
						padding-top: 10rpx;
						font-size: 28rpx;
					}
				}
			}

			.tips {
				height: 72rpx;
				background: #fff;

				.tips-icon {
					color: #fff;
					width: 32rpx;
					height: 32rpx;
					background: #fe7450;
					border-radius: 50%;
					font-size: 24rpx;
					margin: 0 20rpx;
				}
			}

		}

		.ovhd {
			overflow: hidden;
			height: calc(100vh - 100rpx);
		}

		.tabs {
			background-color: #fff;
		}
	}

	//	列表头部
	.tabs-header {
		/* #ifdef APP-PLUS */
		top: calc(var(--status-bar-height) + 44px);
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 0;
		/* #endif */
		z-index: 50;
		position: sticky;
		background-color: #fff;

		.tab-list {
			height: 90rpx;
			display: flex;
			align-items: stretch;
		}

		.tab-item.active {
			color: #333;
			font-weight: bold;

			.tab-underline {
				display: block;
			}
		}

		.tab-item {
			flex: 1;
			color: #999;
			font-size: 32rpx;
			display: flex;
			position: relative;
			align-items: center;
			justify-content: center;
		}

		.tab-underline {
			width: 100rpx;
			height: 4rpx;
			left: 50%;
			bottom: 0;
			display: none;
			position: absolute;
			transform: translateX(-50%);
			background-color: $theme_color;
		}
	}

	.tabs-content {

		//	新闻列表
		.news-list {
			padding: 0 20rpx;

			.news-item {
				padding: 20rpx 0;
			}

			.see-more {
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		//	策略列表
		.strategy-list {
			padding: 0 20rpx;

			.strategy-item {
				padding: 20rpx 0;
			}
		}
	}

	.strategy-three {
		.strategy-header {
			color: #fff;
			height: 60rpx;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: red;

			.strategy-code {
				font-size: 32rpx;
			}

			.strategy-time {}
		}

		.strategy-side {
			background-color: #CB1D14;
		}

		.strategy-trend {
			background-color: #03B016;
		}

		.strategy-body {
			padding: 0 10rpx;
			display: flex;
			align-items: center;

			.strategy-table {
				flex: 1;
			}

			.strategy-btn {
				padding-left: 20rpx;

				.btn {
					color: #fff;
					padding: 10rpx;
					font-size: 24rpx;
					border-radius: 12rpx;
					background-color: $theme_color;
				}
			}
		}

		.strategy-table {
			.table-thead {
				color: #555;
				width: 100%;

				.table-thead__tr {
					display: flex;
					font-size: 28rpx;
				}

				.table-thead__th {
					// flex: 1;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&:first-child {
						justify-content: flex-start;
					}
				}
			}

			.table-tbody {
				width: 100%;

				.table-tbody__tr {
					display: flex;
					font-size: 28rpx;
				}

				.table-tbody__th {
					width: 20%;
					height: 60rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: center;
					vertical-align: middle;

					&:first-child {
						text-align: left;
					}
				}
			}
		}
	}

	.strategy-cont {
		width: 100%;
		background-color: #fff;
		margin: 10px 0;
		padding: 5px 10px;
		border-radius: 5px;
		box-shadow: rgba(0, 0, 0, .3) 0px 0px 3px;

		.cont_tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 2px;

			.text {
				font-size: 18px;
				color: #000;
				font-weight: bold;
			}

			.time {
				font-size: 14px;
				color: #A9B0C5;
			}
		}

		.strategy-side {
			color: #CB1D14;
		}

		.strategy-trend {
			color: #03B016;
		}

		.cont_cont {
			font-size: 12px;
			display: flex;
			justify-content: space-between;

			// color: #000;
			.cont_item {
				margin: 1px 0 1px 10px;
			}

			._itemflex {
				// margin: auto;
				display: flex;
				justify-content: end;
				align-items: center;

				.btn {
					color: #fff;
					padding: 8rpx 20rpx;
					font-size: 12px;
					border-radius: 30rpx;
					background-color: #0763EE;
				}
			}
		}
	}
</style>
